<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" :inline="true" v-show="showSearch">
      <el-form-item label="菜单名称">
        <el-input @keyup.enter="handleQuery" v-model="queryParams.keyword" style="width: 200px" placeholder="请输入菜单名称"
          clearable />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.isDisable" placeholder="菜单状态" clearable style="width: 200px">
          <el-option v-for="item in isDisable" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb15">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd(undefined)">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
      </el-col>
       <RightToolBar @changeShow="changeShowSearch" :showSearch="showSearch" @queryTable="getList"></RightToolBar>
    </el-row>
    <!-- 表格展示 -->
    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
      :tree-props="defaultProps" highlight-current-row>
      <!-- 菜单名称 -->
      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="200"></el-table-column>
      <!-- 图标 -->
      <el-table-column prop="icon" label="图标" align="center" width="90">
        <template #default="scope">
          <i :class="scope.row.icon" v-if="showEIcon(scope.row.icon)"></i>
          <svg-icon v-if="showIcon(scope.row.icon)" :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <!-- 排序 -->
      <el-table-column prop="orderNum" label="排序" align="center" width="60"></el-table-column>
      <!-- 类型 -->
      <el-table-column prop="menuType" label="类型" align="center" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.menuType === 'M'" type="warning">目录</el-tag>
          <el-tag v-if="scope.row.menuType === 'C'" type="success">菜单</el-tag>
          <el-tag v-if="scope.row.menuType === 'B'" type="danger">按钮</el-tag>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column prop="status" label="状态" align="center" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.isDisable === 0">正常</el-tag>
          <el-tag v-if="scope.row.isDisable === 1" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <!-- 权限标识 -->
      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
      <!-- 组件路径 -->
      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
      <!-- 是否隐藏 -->
      <el-table-column prop="status" label="是否隐藏" align="center" width="90">
        <template #default="scope">
          <el-tag v-if="scope.row.isHidden === 0">否</el-tag>
          <el-tag v-if="scope.row.isHidden === 1" type="danger">是</el-tag>
        </template>
      </el-table-column>
      <!-- 创建时间 -->
      <el-table-column label="创建时间" align="center" prop="createTime" width="120">
        <template #default="scope">
          <span>{{ formattedDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="350">
        <template #default="scope">
          <el-button v-if="scope.row.menuType === 'M' || scope.row.menuType === 'C'" type="success" class="el-icon-plus" size="mini"  plain
            @click="handleAdd(scope.row)">新增</el-button>
          <el-button type="warning"  class="el-icon-edit" size="mini" plain  @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" link class="el-icon-delete" size="mini" plain @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="addOrUpdate" width="680px" @close="cancel" append-to-body>
      <el-form ref="menuFormRef" :model="menuForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <!-- <el-cascader :options="menuOptions" clearable></el-cascader> -->
              <el-cascader v-model="menuForm.parentId" :options="menuOptions" :props="{ checkStrictly: true }" :show-all-levels="false" clearable></el-cascader>
              <!-- <el-tree-select v-model="menuForm.parentId" :data="menuOptions" placeholder="选择上级菜单" filterable
                check-strictly :render-after-expand="false"></el-tree-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="menuForm.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="B">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="menuForm.menuType != 'B'">
            <el-form-item label="菜单图标" prop="icon">
              <el-popover placement="bottom-start" width="400" trigger="click" v-model="showChooseIcon">
                  <el-input v-model="menuForm.icon" placeholder="点击选择图标" slot="reference" :prefix-icon="menuForm.icon" @click="showChooseIcon = true">
                      <!-- <i slot="prefix" v-show="this.menuForm.icon" :class="menuForm.icon"></i> -->
                  </el-input>
                <IconSelect @selected="selected"></IconSelect>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="menuForm.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="menuForm.orderNum" controls-position="right" :min="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="menuForm.menuType != 'B'">
            <el-form-item prop="path">
              <template #label>
                <span>
                  <el-tooltip content="访问的路由地址，如：user" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  路由地址
                </span>
              </template>
              <el-input v-model="menuForm.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="menuForm.menuType == 'C'">
            <el-form-item prop="component">
              <template #label>
                <span>
                  <el-tooltip content="访问的组件路径，如：/user/index，默认在views目录下" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  组件路径
                </span>
              </template>
              <el-input v-model="menuForm.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="menuForm.menuType != 'M'">
            <el-form-item>
              <template #label>
                <span>
                  <el-tooltip content="控制器中定义的权限字符，如：system:user:list" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  权限字符
                </span>
              </template>
              <el-input v-model="menuForm.perms" placeholder="请输入权限标识" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="menuForm.menuType != 'B'">
            <el-form-item>
              <template #label>
                <span>
                  <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  显示状态
                </span>
              </template>
              <el-radio-group v-model="menuForm.isHidden">
                <el-radio v-for="dict in isHidden" :key="dict.value" :label="dict.value">
                  {{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="menuForm.menuType != 'B'">
            <el-form-item>
              <template #label>
                <span>
                  <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  菜单状态
                </span>
              </template>
              <el-radio-group v-model="menuForm.isDisable">
                <el-radio v-for="dict in isDisable" :key="dict.value" :label="dict.value">
                  {{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import IconSelect from '@/components/IconSelect/index.vue';
import { formatDate } from "@/utils/date";
import {getMenuList, getMenuOptionTree, addMenu, deleteMenu, editMenu, updateMenu} from '@/api/menu'
export default {
  data() {
    return {
    showSearch: true,
    loading: false,
    title: "",
    addOrUpdate: false,
    queryParams: {},
    isDisable: [
      {
        value: 0,
        label: "正常",
      },
      {
        value: 1,
        label: "禁用",
      },
    ],
    isHidden: [
      {
        value: 0,
        label: "显示",
      },
      {
        value: 1,
        label: "隐藏",
      },
    ],
    showChooseIcon: false,
    refreshTable: true,
    isExpandAll: false,
    menuOptions: [],
    menuForm: {
      icon:'el-icon-search',
      parentId:undefined,
    },
    menuList: [],
    rules:{},
    defaultProps: {
      value: 'id', label: 'label', children: 'children'
      },
    }
  },
  components: {
    IconSelect
  },
  mounted() {
    this.getList();
  },
  methods: {
    changeShowSearch(data){
      this.showSearch = data;
    },
    formattedDate(date) {
      return formatDate(date);
    },
    getList(){
      this.loading = true;
      getMenuList(this.queryParams).then((res)=>{
        if(res.code == 200){
          this.menuList = res.data
          this.loading = false;
        }
      })
    },
    handleQuery(){
      this.getList();
    },
    toggleExpandAll(){},
    //添加或更新菜单
    submitForm(){
          if (Array.isArray(this.menuForm.parentId) && this.menuForm.parentId.length > 0) {
        this.menuForm.parentId = this.menuForm.parentId[0];
      }
      if(this.menuForm.id == undefined)
      {
      addMenu(this.menuForm).then((data)=>{
        if(data.code == 200){
          this.$message({type:'success',message:'添加菜单成功！'})
        }
        this.addOrUpdate = false;
        this.getList();
      })
      }else{
              updateMenu(this.menuForm).then((res)=>{
        if(res.code == 200){
          this.$message({type:'success',message:'编辑菜单成功！'})
        }
      })
       this.addOrUpdate = false;
        this.getList();
      }
 

    },
    cancel(){
      this.addOrUpdate = false;

    },
    handleAdd(data){
      
      this.getMenuTree();
      this.addOrUpdate = true;
      if(data == undefined)
      {
        this.title = '添加菜单';
        this.menuForm = {
          icon:'el-icon-search',
          parentId:undefined,
        }
      this.menuForm.icon = ''
      }
      else{
        this.title = '添加子菜单或同级菜单';
        this.menuForm = {
          icon:'',
          parentId:data.id,
        }
      }

    },
    //选定的图标
    selected(select){
       // 异步操作后，等待DOM更新后再更新图标显示
      this.menuForm.icon = select;
      console.log(this.menuForm.icon);
      this.showChooseIcon = false;
    },
    showEIcon(icon) {
      if (icon && typeof icon === 'string' && icon.startsWith('el-icon')) {
        return true;
      }
      return false;
    },
    showIcon(icon){
      if (icon && typeof icon === 'string' && !icon.startsWith('el-icon')){
        return true;
      }
      return false;
    },
    //获取添加菜单时候的菜单选项树
    async getMenuTree(){
      await getMenuOptionTree().then((res)=>{
        this.menuOptions = [];
        if(res.code == 200){
          this.menuOptions.push({value: 0, label:'顶级菜单',children:res.data});
        }
      })
    },
    //删除菜单
    handleDelete(id){
      deleteMenu(id).then((res)=>{
        if(res.code == 200){
          this.$message({type:'success',message:'删除菜单成功！'})
        }
      })
      this.getList();
    },
    //编辑菜单
    handleEdit(id){
      
      this.addOrUpdate = true;
      this.title = '编辑菜单';
      editMenu(id).then(data=>{
        if(data.code == 200){
          this.menuForm = data.data;
          this.getMenuTree();
           if(data.data.parentId == 0){
            this.menuForm.parentId = [0];
          }
        }
      })
    }
  },
}
</script>

<style>

</style>